<template>
    <div class="footer">
        <div class="item">
            <router-link to="/home" active-class="nav_color" class="nav_item">
                <van-icon name="wap-home-o" />首页
            </router-link>
        </div>
        <div class="item">
            <router-link to="/cart" active-class="nav_color" class="nav_item">
                <van-icon name="cart-o" />购物车
            </router-link>
        </div>
        <div class="item">
            <router-link to="/order" active-class="nav_color" class="nav_item">
                <van-icon name="balance-list-o" />订单
            </router-link>
        </div>
        <div class="item">
            <router-link to="/mine" active-class="nav_color" class="nav_item">
                <van-icon name="friends-o" />我的
            </router-link>
        </div>
    </div>
</template>

<script setup>
</script>

<style scoped lang="less">
    .footer{
        display: flex;
        font-size: 18px;
        background-color: #fff;
        border-top:1px solid #ccc;
        padding:10px 0;
        height:40px;
        .item{
            flex:1;
            display: flex;
            justify-content: center;
            .nav_color{
                color:#ffc400;
            }
            .nav_item{
                display: flex;
                flex-direction: column;
                align-items: center;
                color:#333;
            }
        }
    }
</style>
